<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue设值语法</title>
    <script src="../js/vue.min.js"></script>
    <style>
        /** 斗篷样式 */
        [v-cloak]{
            display: none;
        }
        .d1 {
            width: 200px;
            height: 150px;
            background-color: green;
        }
        .d2 {
            border: 5px yellow solid
        }

    </style>
</head>
<body>

<div id="div" style="margin: 100px">
    <h2>v-pre</h2>
    <p>{{text}}</p>
    <p v-pre>{{text}}</p>
    <pre>
        pre标签会保留
        空格和换行
    </pre>

    <hr><h2>v-text(等效于胡子语法和innerText) 和 v-html(innerHTML属性)</h2>
    <p v-text="text"></p>
    <p v-text="a"></p>
    <p v-html="a"></p>

    <hr><h2>v-once 只渲染一次</h2>
    <p v-text="text" v-once></p>

    <hr><h2>v-cloak 斗篷指定, 渲染前隐藏vue的语法代码</h2>
    <p v-cloak>{{text}}</p>

    <hr><h2>v-bind: 用于绑定标签的属性值, 语法糖: </h2>
    <a v-bind:href="url" :target="tg">京东</a>
    <div :style="style1" :style="style2">样式字符串绑定</div>
    <div :style="style2" style="width:70px;height:80px;background:red">样式对象绑定</div>
    <div :class="['d1','d2']">样式数组绑定</div>

</div>

<script>
    function loadVue(){
        var v = new Vue({
            el : "#div",
            data : {
                text : "VUE教程",
                a : "<a href='http://www.taobao.com'>淘宝</a>",
                url : "http://jd.com",
                tg : "_blank",
                style1 : "width:100px;height:50px;background:red",
                style2 : {border : "1px blue solid"}
            }
        })
    };
    // 一秒之后再渲染
    setTimeout( loadVue, 100);

</script>


</body>
</html>